<template>
  <div id="app">
    <el-row class="header">
      <el-col :span="24" class="logo-container">
        <h3>点餐系统管理后台</h3>
      </el-col>
    </el-row>
    <!-- element-ui的栅格系统分24列,通过span属性进行控制  -->
    <el-row class="main">
      <el-col :span="4">
        <el-menu :router="true" default-active="1-1" class="el-menu-vertical-demo"theme="dark">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-message"></i>菜品分类</template>
            <el-menu-item-group>
              <el-menu-item :route="{name:'foodType'}" index="1-1">分类管理</el-menu-item>
              <el-menu-item :route="{name:'foodTypeEditor'}" index="1-2">分类编辑</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
            <i class="el-icon-menu"></i>菜品信息</template>
            <el-menu-item-group>
              <el-menu-item index="2-1" :route="{name:'foods'}">菜品管理</el-menu-item>
              <el-menu-item index="2-2" :route="{name:'foodsEditor'}">菜品编辑</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
      <el-col :span="20">
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'app',
};
</script>

<style>
.header{
  background-color: rgb(32, 160, 255);
  color: #fff;
  padding-left: 50px;
}
html,body{
  height: 100%;
  margin: 0;
  padding: 0;
}
.el-breadcrumb{
  padding: 5px;
}
</style>
